<template>
	<view class="container">
		<xk-header :headerbg="true" class="header" :back="true" title="设施巡检"></xk-header>
		<view class="bar">
			<!--搜索框 start-->
			<view class="search-box">
				<u-search shape="square" placeholder="编号/设备信息/巡检位置" height="42" :showAction="false" v-model="search"
					@search="searchHandle"></u-search>
			</view>
			<!--搜索框 end-->

			<!-- 导航栏 start -->
			<u-tabs :current="tabIndex" :list="tabs" @click="clickTabs" lineWidth="40" lineColor="#f56c6c" :activeStyle="{
				color: '#000000',
				fontWeight: 'bold',
				transform: 'scale(1.15)'
			}" :inactiveStyle="{
	color: '#303133',
	transform: 'scale(1.15)'
}" itemStyle="padding-left: 15px; padding-right: 15px;height:45px;width:25%;"></u-tabs>
			<!-- 导航栏 end -->
		</view>
		<!--查询日期 start-->
		<view class="select-search-btn">
			<u-row>
				<u-col span="4" offset="1">
					<view @click="showDate = true">
						<u--text suffixIcon="arrow-down-fill" size="16" bold iconStyle="font-size:15px;margin-left:2px;"
							:text="valueDate[tabIndex].date || '全部'"></u--text>
					</view>
					<u-datetime-picker :show="showDate" v-model="valuePickerDate" mode="year-month" @cancel="cancelDate"
						@confirm="confirmDate" @close="closeDate" :closeOnClickOverlay="true"></u-datetime-picker>
				</u-col>
				<u-col span="2">
					<view @click="resetSort()">重置</view>
				</u-col>
			</u-row>
		</view>
		<!--查询日期 end-->

		<!--列表 start-->
		<swiper :current="tabIndex" class="list-swiper-other" @change="(e) => { tabIndex = e.target.current; }"
			style="height: 100%;">
			<swiper-item v-for="(tabItem, tabIndex) of tabs" :key="tabIndex">
				<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered"
					@refresherrefresh="pullDownRefresh" scroll-y style="height: 100%;" @scrolltolower="bottom">
					<view v-if="tabItem.data.length > 0" class="list-info">
						<view v-for="(item, index) of tabItem.data" :key="item.id" class="data-list">
							<view class="title">设备巡查：{{ item.no }}</view>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="3"><text class="grey-text">设备信息：</text></u-col>
								<u-col span="9">{{ item.name }}</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="3"><text class="grey-text">巡检位置：</text></u-col>
								<u-col span="9">{{ item.matter }}</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="3"><text class="grey-text">巡检时段：</text></u-col>
								<u-col span="9">{{ item.time }}</u-col>
							</u-row>
							<view class="list-btn">
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="12" v-if="type == 'get'">
										<view class="btn-name btn-type-getAndDeal" @click="sendOrders(item)">派单</view>
									</u-col>
									<u-col span="12" v-else-if="type == 'deal'">
										<view class="btn-name btn-type-getAndDeal" @click="sendOrders(item)">处理</view>
									</u-col>
									<u-col span="12" v-else-if="type == 'finish'">
										<view class="btn-name btn-type-finish" @click="sendOrders(item)">已完成</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
					<view class="empty-view" v-else>
						<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
						<view>哎呀，该界面暂无内容~</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!--列表 end-->
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgUrl:this.$config.BASE_imgUrl,
			tabs: [{
				name: '待接单',
				index: 0,
				type: 'get',
				data: [
					{
						id: 1,
						no: 'IN202301000018',
						name: 'SZ202205005-神舟笔记本',
						matter: '西门',
						time: '2023-01-11 06:21 - 16:21'
					}
				]
			},
			{
				name: '待处理',
				index: 2,
				type: 'deal',
				data: [
					{
						id: 1,
						no: 'IN202301000017',
						name: 'SZ202205005-神舟笔记本',
						matter: '东门',
						time: '2023-01-10 06:21 - 16:21'
					}
				]
			},
			{
				name: '已完成',
				index: 3,
				type: 'finish',
				data: [
					{
						id: 1,
						no: 'IN202301000016',
						name: 'SZ202205005-神舟笔记本',
						matter: '南门',
						time: '2023-01-09 06:21 - 16:21'
					}
				]
			}],
			tabIndex: 0,
			showDate: false,
			valuePickerDate: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm'),
			triggered: false,
			type: 'get',
			search: '',
			valueDate: [{
				date: '',
			}, {
				date: '',
			}, {
				date: '',
			}, {
				date: '',
			}],
		};
	},
	methods: {
		//搜索框
		searchHandle() {

		},

		click(item) {

		},
		//切换导航栏
		clickTabs(item) {
			this.tabIndex = item.index;
			this.type = item.type
		},

		//日期选择弹框
		cancelDate() {
			this.showDate = false;
		},
		confirmDate(e) {
			this.showDate = false;
		},
		closeDate() {
			this.showDate = false
		},

		//重置
		resetSort() {

		},

		//下拉刷新
		pullDownRefresh() {

		},

		//触底翻页
		bottom() {

		},

		//派单按钮
		sendOrders(e) {

		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: rgba(246, 247, 251, 1);
	height: 100vh;

	.bar {
		width: 100%;
		background-color: #FFFFFF;
	}

	.select-search-btn {
		margin: 15px 0px 10px 10px;
	}

	.list-swiper-other {
		background-color: #f7f7f7;
		border-radius: 20rpx;
	}

	.data-list {
		background: #FFFFFF;
		padding: 20px 10px 0px 10px;
		margin: 10px;
		border-radius: 5px;
		font-size: 15px;

		.title {
			font-size: 17px;
			font-weight: bold;
			color: #333333;
			margin-bottom: 15px;
		}

		.grey-text {
			color: #999999;
		}

		.list-btn {
			text-align: center;
			border-top: 1px solid #F5F5F5;
			height: 104rpx;
			line-height: 104rpx;
			color: #000000;
			font-size: 34rpx;
			font-weight: bold;

			.btn-name {
				text-align: center;
				color: #0055FE;
			}

			.btn-type-getAndDeal {
				color: #0055FE;
			}

			.btn-type-finish {
				color: #BDBDBD;
			}
		}
	}
}

.search-box {
	padding: 10px 15px 10px 15px;
}

.empty-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 200rpx 0rpx;
	color: #333;
	font-size: 28rpx;

	.empty-icon {
		width: 420rpx;
		height: 420rpx;
	}
}

.list-info {
	margin: 0 20rpx;
	padding-bottom: 30rpx;
}</style>
